<template>
  <div >
    <div class="contain-top" >
      <div class="top-top">
        <div class="top-top-top"
             @mouseenter="storeIn" @mouseout="storeOut"
        >
            <div class="top-top-top-text" >
              门店数量：{{listQuery.storeCount}}
<!--              <div class="list-store" v-show="dialogVisibleStore" @mouseenter="storeIn" @mouseleave="storeIn">-->
<!--                。。。。。-->
<!--              </div>-->
            </div>
        </div>
        <div class="top-top-top">
          <div class="top-top-top-text">

           医师数量：{{listQuery.physicianCount}}
          </div>
        </div>
        <div class="top-top-top" >
          <div class="top-top-top-text">
            在册顾客数量：{{listQuery.clientCount}}
          </div>
        </div>
      </div>
      <div class="top-middle">
        <div class="top-middle-left">
          <div class="top-middle-left01" id="main" >

          </div>

          <div class="top-middle-left02" style="background-color: #f285a6">

          </div>
        </div>
        <div class="top-middle-map">
          <div id="bdmap" class="map" style ="position:absolute;bottom:0px;top:0px;width:100%"></div>
          <div class="map-container">
            <amap :zoom="11" :center="center">
              <amap-marker  v-for="(marker,index) in markers"
                            :key="index"
                            :position="marker.position" />
            </amap>
          </div>


        </div>
        <div class="top-middle-right">
          <div class="top-middle-right01" id="salesVolumeOfStoreDay">

          </div>

          <div class="top-middle-right02" style="background-color: #ac6c87">

          </div>
        </div>


      </div>


      <div class="contain-buttom"  id="salesVolume" >

      </div>


    </div>



  </div>

</template>

<script defer="defer">
  import { mapGetters } from 'vuex'
  import * as store from "@/api/store/store"
  import * as physician from "@/api/personal/physician"
  import * as client from "@/api/personal/client"
  import * as product from "@/api/product/product"


  export default {
    name: 'Dashboard',
    data() {
      return {
        storeList:null,
        physicianList:null,
        clientList:null,
        selectNameAndInventoryList:null,
        proNameList:[],
        proInventoryList:[],
        map:null,
        dialogVisibleStore: false,
        markers:[{
          position:[121.48,31.22],
        },{
          position:[121.6,31.3],
        },{
          position:[121.467826,31.246363],
        },{
          position:[121.482824,30.923178],
        },{
          position:[121.373619,31.746609],
        },{
          position:[121.246751,31.00985],
        },{
          position:[121.403917,31.354982],
        },{
          position:[121.403768,31.355758],
        },{
          position:[121.391253,31.121468],
        },{
          position:[121.64891,31.195115],
        },{
          position:[121.492521,31.413935],
        },{
          position:[121.389804,31.226884],
        },{
          position:[121.733523,31.392282],
        },{
          position:[121.264153,31.355324],
        },{
          position:[121.229007,31.072203],
        },{
          position:[121.495946,31.239125],
        },{
          position:[121.454768,31.245129],
        },{
          position:[121.605333,31.337689],
        },{
          position:[121.25114,31.384979],
        }
        ],
        textMap: {
          update: 'Edit',
          create: 'Create'
        },
        //这个是中心坐标
        center:[121.48,31.22],
        total: 0,
        listQuery: { // 查询列表时的参数对象
          pageNumber: 1,
          pageSize: 10,
          appName: process.env.VUE_APP_APP_NAME,
          tenantIdList: [],
          storeCount:null,
          physicianCount:null,
          clientCount:null
        },

      }
    },
    computed: {
      ...mapGetters([
        'name'
      ])
    },

    mounted() {
      this.getStoreListCount()
      this.getPhysicianListCount()
      this.getClientListCount()
      this.getSelectNameAndInventory()
      this.getInventory()
    },

    methods: {
      //每天销售额
      getSalesVolume(){
        //title(标题)、legend(图例)、grid（网格）xAxis（x轴）、yAxis（y轴）、dataZoom（区域缩放）tooltip（提示框组件）、toolbox（工具栏）、series（系列列表。每个系列通过 type 决定自己的图表类型）
        //来获取存放柱状图的dom元素
        let myChartMain1 = this.$echarts.init(document.getElementById('salesVolume'))
        //这里是柱状图的配置，最重要的是series里面的data和xAxis中的data都是数组，
        // 用来存放数据，上面从后台获取到的seriesData和nameDatas赋值给它们，就可以展示所需要的数据
        let option01;
        option01 = {
          title: {
            text: '每天销售额'
          },
          color: ['#a0d595'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },

          },
          legend: {
            data: ['']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 1],
            "minInterval": 1,

          },
          yAxis: {
            type: 'category',
            data: this.proNameList,//这里是和柱状条数据对应的名称
          },
          series: [

            {
              name: '',//数据的名称，例如销量
              type: 'bar',
              barWidth: '70%',
              data: this.proInventoryList,//一定要赋值给data
            },

          ]
        };
        myChartMain1.setOption(option01);
      },

      //单个商品库存量
      getInventory(){
        //title(标题)、legend(图例)、grid（网格）xAxis（x轴）、yAxis（y轴）、dataZoom（区域缩放）tooltip（提示框组件）、toolbox（工具栏）、series（系列列表。每个系列通过 type 决定自己的图表类型）
        //来获取存放柱状图的dom元素
          let myChartMain1 = this.$echarts.init(document.getElementById('main'))
          //这里是柱状图的配置，最重要的是series里面的data和xAxis中的data都是数组，
          // 用来存放数据，上面从后台获取到的seriesData和nameDatas赋值给它们，就可以展示所需要的数据
          let option01;
          option01 = {
            title: {
              text: '单个商品库存量'
            },
            color: ['#a0d595'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },

            },
            legend: {
              data: ['']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 1],
              "minInterval": 1,

            },
            yAxis: {
              type: 'category',
              data: this.proNameList,//这里是和柱状条数据对应的名称
            },
            series: [

              {
                name: '',//数据的名称，例如销量
                type: 'bar',
                barWidth: '70%',
                data: this.proInventoryList,//一定要赋值给data
              },

            ]
          };
        myChartMain1.setOption(option01);
      },

      //每个门店每天销售额
      getSalesVolumeOfStoreDay(){
        //title(标题)、legend(图例)、grid（网格）xAxis（x轴）、yAxis（y轴）、dataZoom（区域缩放）tooltip（提示框组件）、toolbox（工具栏）、series（系列列表。每个系列通过 type 决定自己的图表类型）
        //来获取存放柱状图的dom元素
          let myChartMain1 = this.$echarts.init(document.getElementById('salesVolumeOfStoreDay'))
          //这里是柱状图的配置，最重要的是series里面的data和xAxis中的data都是数组，
          // 用来存放数据，上面从后台获取到的seriesData和nameDatas赋值给它们，就可以展示所需要的数据
          let option01;
          option01 = {
            title: {
              text: '每个门店销售额'
            },
            color: ['#a0d595'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },

            },
            legend: {
              data: ['']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 1],
              "minInterval": 1,

            },
            yAxis: {
              type: 'category',
              data: this.proNameList,//这里是和柱状条数据对应的名称
            },
            series: [

              {
                name: '',//数据的名称，例如销量
                type: 'bar',
                barWidth: '70%',
                data: this.proInventoryList,//一定要赋值给data
              },

            ]
          };
        myChartMain1.setOption(option01);
      },


      // 获取店铺数量和列表
      async getStoreListCount() {
        this.listQuery.tenantIdList = []
        const { content } = await store.getStoreListCount(this.listQuery)
        this.storeList = content;
        for (let storeCount = 0; storeCount < content.length ; storeCount++) {
          storeCount = storeCount + 1
          this.$set(this.listQuery,'storeCount',storeCount)
        }
      },
      // 获取医师数量和列表
      async getPhysicianListCount() {
        this.listQuery.tenantIdList = []
        const { content } = await physician.getPhysicianListCount(this.listQuery)
        this.physicianList = content;
        for (let physicianCount = 0; physicianCount < content.length; physicianCount++) {
          physicianCount = physicianCount + 1
            this.$set(this.listQuery,'physicianCount',physicianCount)
        }
      },
      // 获取用户数量和列表
      async getClientListCount() {
        this.listQuery.tenantIdList = []
        const { content } = await client.getClientListCount(this.listQuery)
        this.clientList = content;
        for (let clientCount = 0; clientCount < content.length; clientCount++) {
          clientCount = clientCount + 1
          this.$set(this.listQuery,'clientCount',clientCount)
        }
      },
      // 获取所有数据
      async getSelectNameAndInventory() {
        const { content } = await product.getSelectNameAndInventory(this.listQuery)
        this.selectNameAndInventoryList = content;
        for(let i =0;i<content.length; i++){
          this.proNameList.push(content[i].proName);
          this.proInventoryList.push(content[i].proInventory) ;
          this.getInventory();
        }
      },
      // 获取每个门店每天的销售额
      async getSalesVolumeOfStore() {
        const { content } = await product.getSelectNameAndInventory(this.listQuery)
        this.selectNameAndInventoryList = content;
        for(let i =0;i<content.length; i++){
          this.proNameList.push(content[i].proName);
          this.proInventoryList.push(content[i].proInventory) ;
          this.getInventory();
        }
      },


      handler ({BMap, map}) {
        let me = this;
        console.log(BMap, map)
        // 鼠标缩放
        map.enableScrollWheelZoom(true);
        // 点击事件获取经纬度
        map.addEventListener('click', function (e) {
          console.log(e.point.lng, e.point.lat)
        })
      },

      storeIn(){

        console.log("鼠标进");
        this.dialogVisibleStore = true;
      },

      storeOut(){
        console.log("鼠标出去")
        this.dialogVisibleStore = false;
      },






    },

//调用


    beforeDestroy() {

    }
  }
</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;

    }
    &-text {
      font-size: 20px;
      line-height: 30px;
    }
  }
  .important-text {
    font-size: 40px !important;
    line-height: 80px !important;
  }
  .dashboard-logo {
    margin-top: 120px;
    text-align: center;
    img {
      width: 150px;
      height: 150px;
    }
    span {
      color: #bfcbd9;
    }
  }
  .top-top{
    width: 98%;
    height: 160px;
    margin-left: 30px;
    display: flex;
    flex-direction: row;
  }
  .top-bottom{
    width: 96%;
    height: 160px;
    margin-left: 30px;

  }
  .top-top-top{
    width: 31.5%;
    height: 150px;
    margin-right: 8px;
    font-family: 'Share Tech Mono', monospace;
    color: #333333;
    color: #333333;
    text-shadow: 0 0 1px #C0C0C0, 0 0 5px rgba(10, 175, 230, 0);
    background: #1E90FF;
    background: radial-gradient(ellipse at center,  #FFFFFF  0%, #FFFFFF 70%);
    background-size: 100%;
    border-radius: 5px;

    span{
      margin-left: 50px;
      color: #ffffff;
      font-size: 22px;
    }
  }
  .top-top-top-text{
    margin-top: 55px;
    margin-left: 55px;
    font-size: 30px;
  }
  .contain-top{
    width: 100%;
    height: 1500px;
    float: left;
    margin-bottom: 40px;
  }

  .contain-buttom{
    width: 94%;
    height: 30%;
    float: left;
    margin-left: 30px;
    margin-top: 30px;
    background-color: #ffffff;
    border-radius: 10px;
  }
  .top-middle{
    width: 96%;
    height: 650px;
    margin-left: 30px;
    float: left;
  }
  .top-middle-left{
    width: 24%;
    height: 650px;
    float: left;
    margin-right: 10px;
  }
  .top-middle-left01{
    width: 100%;
    height: 320px;
    float: left;
  }
  .top-middle-left02{
    width: 100%;
    height: 320px;
    float: left;
    margin-top: 10px;

  }
  .top-middle-map{
    width: 48%;
    height:650px;
    float: left;
    margin-right: 10px;
  }
  .top-middle-right{
    width: 24%;
    height: 650px;
    float: left;
  }
  .top-middle-right01{
    width: 100%;
    height: 320px;
    float: left;

  }
  .top-middle-right02{
    width: 100%;
    height: 320px;
    float: left;
    margin-top: 10px;
  }
  .map {
    width: 100%;
    height: 100%;
  }

  .map-container{
    width: 100%;
    height: 100%;
  }

  .list-store{
    width: 200px;
  height: 200px;
  border: #999999;
    border-radius: 10px ;
    background-color: red;

  }

</style>
